<template>
  <div class="right-content">
    <div class="panel panel-jiankong">
      <div class="left-content has-border">
        <i class="icon"></i>
        <div class="title">分路监控</div>
      </div>
      <div class="right-c">
        <div class="icon">
          <div class="icon-body">
            <span>监测分路</span>
            <div><i class="fa fa-anchor" aria-hidden="true"></i></div>
          </div>
          <div class="icon-footer">
            <VueCountTo :startVal=0 :endVal="Number(cityInfo.deviceTotal)" class="font-lcd"></VueCountTo>
            <span>路</span>
          </div>
        </div>
        <div class="icon">
          <div class="icon-body">
            <span>在线分路</span>
            <div><i class="fa fa-check" aria-hidden="true"></i></div>
          </div>
          <div class="icon-footer">
            <VueCountTo :startVal=0 :endVal='Number(cityInfo.deviceOnlineSize)' class="font-lcd"></VueCountTo>
            <span>路</span>
          </div>
        </div>
        <div class="icon">
          <div class="icon-body">
            <span>离线分路</span>
            <div><i class="fa fa-times" aria-hidden="true"></i></div>

          </div>
          <div class="icon-footer">
            <VueCountTo :startVal=0 :endVal='Number(cityInfo.deviceOfflineSize)' class="font-lcd"></VueCountTo>
            <span>路</span>
          </div>
        </div>
      </div>
    </div>

    <div class="panel panel-paiming">
      <div class="left-content has-border">
        <i class="icon"></i>
        <div class="title">今日电量排名</div>
      </div>
      <div class="right-c">
        <ele />
      </div>
    </div>

    <div class="panel panel-yichang">
      <div class="left-content has-border">
        <i class="icon"></i>
        <div class="title">异常事件</div>
      </div>
      <div class="right-content">
        <different />
      </div>
    </div>
  </div>
</template>
<script>
  import {
    mapGetters,
    mapState
  } from 'vuex';
  import VueCountTo from 'vue-count-to';
  import ele from '@/components/ele';
  import different from '@/components/different';
  export default {
    computed: {
      ...mapGetters(['citys', 'cityInfo']),
      ...mapState({
        exceptionList: state => state.cityInfo.exceptionList,
        companyList: state => state.cityInfo.companyList
      })
    },
    components: {
      ele,
      different,
      VueCountTo
    },
    data() {
      return {

      }
    }
  }

</script>
